<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>职统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/styles/award.css"/>
    <link rel="stylesheet" href="/styles/common.css"/>
</head>


<body >
    <#include "top.ftl">
    <div class="page-body">
        <#include "leftmenu.ftl">
        <div class="page-content">
            <div>欢迎您: ${currentuser.employeename} ,您当前的抽奖次数为 : <span id="awardshowtime" style="color: red"></span> 次</div>
            <input id="awardtimes" value="${awardtime}" hidden>
            <br><br><br>
            <div class="game" >
                <div class="turntable"style="position: absolute;left: 50%;transform:translateX(-50%)"  >
                    <#if award??>
                        <#list award as ad>
                            <#if ad_index == 4>
                                <div class="gift"></div>
                            <#else>
                                <div class="gift">${ad.awardname}</div>
                            </#if>
                        </#list>
                    </#if>
                    <#if awardtime gt 0>
                        <button type="button" class="start" onclick="start()">抽奖</button>
                    <#else>
                        <button type="button" class="start" >没有抽奖机会</button>
                    </#if>
                </div>
            </div>


        </div>
    </div>

<script src="/styles/js/jquery-1.7.2.js"></script>

<script>
    var awardtimes = $("#awardtimes").val();
    var awardshowtime = $("#awardshowtime");
    console.log("awardtimes:"+awardtimes)
    awardshowtime.text(awardtimes);

    var gift;
    var x=0;
    //可修改ArrList以定义每一奖项中奖概率;
    var ArrList=[20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35];
    //position用于定位每一个抽奖格;
    var position=[0,1,2,5,8,7,6,3];

    function start(){
        var initial=getArrayItems(ArrList,1);
        for (var i = 0; i < initial; i++) {
            if (awardtimes < 1){
                alert("没有抽奖机会了")
                return ;
            }
            setTimeout(()=>{
                $('.gift').removeClass("selected");
                gift=$('.gift:eq('+ position[(x%8)] +')');
                gift.addClass('selected');
                x++;
                if (x==initial) {setTimeout(()=>{
                    alert('恭喜获得礼物：'+gift.text());
                    getawardinrecord(gift.text());
                    awardtimes--;
                    awardshowtime.text(awardtimes);
                    console.log(position[(x%8)]);
                    x=0;
                },10)}
            },i*150);
        }
    }
    function getawardinrecord(awardname) {
        $.post("/awardrecord",{awardname:awardname},function (msg) {
            if(msg == 'success'){
                console.log("记录成功~");
            }
        })
    }

    function getArrayItems(arr, num) {
        //新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;
        var temp_array = new Array();
        for (var index in arr) {
            temp_array.push(arr[index]);
        }
        //取出的数值项,保存在此数组
        var return_array = new Array();
        for (var i = 0; i<num; i++) {
            //判断如果数组还有可以取出的元素,以防下标越界
            if (temp_array.length>0) {
                //在数组中产生一个随机索引
                var arrIndex = Math.floor(Math.random()*temp_array.length);
                //将此随机索引的对应的数组元素值复制出来
                return_array[i] = temp_array[arrIndex];
                //然后删掉此索引的数组元素,这时候temp_array变为新的数组
                temp_array.splice(arrIndex, 1);
            } else {
                //数组中数据项取完后,退出循环
                break;
            }
        }
        return return_array;
    }
</script>
</body>
</html>
